<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/chat-index.css">
</head>
<body>
    <div class="container box">
        <div class="box-header">
            <div class="photo">
                <img src="/static/img/avatar.png" alt="头像" style="height: 90%;width: 90%;border-radius: 50%">
            </div>
            <span style="font-size: 20px;  margin-left: 70px; display: inline-block;color: red;font-weight: 600;margin-top: 15px;" th:text="${user}"></span>
            <div class="box-close" id="close-box" onclick="closeBox()">X</div>
        </div>
        <div class="box-body">
            <div class="chat-content">
                欢迎<span id="user" th:text="${user}"></span>进入聊天室<span id="message"></span>
                <ul id="content-pane" style="list-style: none;">
                    <!--<li style="margin-top: 5px">-->
                        <!--<span style="font-weight: 600">张展</span>-->
                        <!--<span class="chat-content-list">55555</span>-->
                    <!--</li>-->
                </ul>

            </div>
            <div class="send-content">
                <div style="height: 100%" class="input-group">
                    <input id="text" type="text" class="form-control" placeholder="输入中..." style="height: 100%" onkeypress="enterSend(e)">
                    <span class="input-group-btn" style="height: 100%">
                        <button class="btn btn-primary" type="button" style="height: 100%" onclick="send(document.getElementById('user').innerText)">发送</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery 3 -->
    <script src="/static/js/jquery.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/websocket.js"></script>
    <script>
        $(function () {
            conectWebSocket(document.getElementById("user").innerText);
        });
        $("#text").keypress(function (even) {
            if (even.which  == 13) {
                  send(document.getElementById('user').innerText);
            }
        });
        function closeBox() {
            let innerText = document.getElementById('user').innerText;
            $.ajax({
                url:"/close",
                data:{"username":innerText},
                type:'get',
                contentType:"application/json;charset=UTF-8",
                success:function (res) {
                    window.close();
                }
            })

        }
    </script>
</body>
</html>